<template>
  <a-layout id="xm-body">
    <a-layout-sider
      v-model="collapsed"
      theme="light"
      class="layout-sider"
    >
      <div class="logo"><img class="pic-logo" src="~@/assets/logo.png"></div>
      <a-menu class="menu-item" theme="light" mode="inline" @click="menuHandle" :default-selected-keys="['menu_1']">
        <a-menu-item :key="index" v-for="(menuInfo, index) in menu" :title="menuInfo.title">
          <a-icon :type="menuInfo.icon" />
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-sider
        theme="light"
        class="sub-layout-sider"
      >
        <a-menu class="sub-menu-item" theme="light" mode="inline" v-model="subMenuKey" :default-selected-keys="subMenuKey">
          <a-menu-item :key="subIndex" v-for="(menuInfo, subIndex) in subMenu">
            <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
              <span>{{ menuInfo.title }}</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{}">
        <div v-bind:style="layoutMainContent">
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import storage from 'store'
import { ABOUT_INFO } from '@/store/mutation-types'
import { localApi } from '@/api/main'

export default {
  name: 'Layout',
  data() {
    return {
      collapsed: true,
      menu: {
        'menu_1' : {
          icon: 'home',
          title: ''
        },
        'menu_2' : {
          icon: 'setting',
          title: ''
        },
      },
      menuKey: 'menu_1',
      subMenuKey: ['subMenu_1'],
      subMenu: {},
      subMenuList: {
        'menu_1' : {
          'subMenu_1' : {
            pageName: 'FileUpload',
            params: {},
            title: '上传'
          },
          'subMenu_2' : {
            pageName: 'FileList',
            params: {},
            title: '历史'
          },  
          'subMenu_3' : {
            pageName: 'FileSetting',
            params: {},
            title: '配置'
          },   
          'subMenu_4' : {
            pageName: 'FileAbout',
            params: {},
            title: '关于'
          },
        },
        'menu_2' : {
          'subMenu_1' : {
            pageName: 'Setting',
            params: {},
            title: '基础设置'
          }
        },
      },
      contentPage: '',
      aboutInfo: {},
      layoutMainContent: {}
    };
  },
  mounted () {
    this.menuHandle({key: 'menu_1'});
    this.getAbout();
  },
  methods: {
    getAbout () {
      localApi('getAbout', {}).then(res => {
        this.aboutInfo = res.data;
        this.layoutMainContent = this.aboutInfo.layoutMainContent;
        storage.set(ABOUT_INFO, this.aboutInfo);
        return true;
      }).catch(err => {
        console.log('err:', err)
      })
    },
    menuHandle (item) {
      this.subMenu = this.subMenuList[item.key]
      this.subMenuKey = ['subMenu_1']
      const linkInfo = this.subMenu['subMenu_1']
      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
    },
  },
};
</script>

<style lang="less" scoped>
// 嵌套
#xm-body {
  .logo {
    border-bottom: 1px solid #e8e8e8;
  }
  .pic-logo {
    height: 32px;
    //background: rgba(139, 137, 137, 0.2);
    margin: 10px;
  }
  .layout-sider {
    border-right: 1px solid #e8e8e8;
  }
  .menu-item {
    .ant-menu-item {
      background-color: #fff;
      margin-top: 0px;
      margin-bottom: 0px;
    }
  }
  .sub-layout-sider {
    background-color: #FAFAFA;
  }
  .sub-menu-item {
    .ant-menu-item {
      margin-top: 0px;
      margin-bottom: 0px;
    }
    .ant-menu-item::after {
      border-right: 3px solid #F2F2F2;
    }
    .ant-menu-item-selected {
      background-color:#F2F2F2;
      span {
        color: #111;
      }
    }
  }
  .sub-menu-item.ant-menu {
    background: #FAFAFA;
  }
  .sub-menu-item.ant-menu-inline {
    border-right: 0px solid #FAFAFA;
  }
  // .main-content {
  //   background: #fff;
  //   min-height: 570px;
  // }
}
</style>
